/**
 * 由 WangYu 创建
 * 日期 2017/9/25
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity, ScrollView, RefreshControl, Dimensions, Button, TouchableWithoutFeedback
} from 'react-native';
import Toast from "teaset/components/Toast/Toast";
import CommonNavigationBar from "../../view/CommonNavigationBar";
import {themeColor} from "../../util/Config";
import Api from "../../util/Api";
import {Actions} from "react-native-router-flux";
import NetUtils from "../../util/NetUtils";
import  ViewPager from "../../view/ViewPager";
import HomeMiddleView from "./HomeMiddleView";
import {connect} from "react-redux";
let deviceWidth = Dimensions.get('window').width;
// 用于构建DataSource对象
let dataSource = new ViewPager.DataSource({
    pageHasChanged: (p1, p2) => p1 !== p2,
});
let rateBean = require('../../localData/RateBean.json');
class HomePage extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isRefreshing: true,
            dataSource: dataSource.cloneWithPages(['a']),
            rateData: rateBean,
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <CommonNavigationBar title="首页" showLeftIcon={false}/>
                <ScrollView
                    contentContainerStyle={{alignItems: 'stretch'}}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={this._onRefresh}
                            tintColor="#ff0000"
                            title="Loading..."
                            titleColor="#00ff00"
                            colors={[themeColor]}
                            progressBackgroundColor={'white'}/>
                    }>
                    {/*轮播图*/}
                    <View style={{height: 160}}>
                        <ViewPager
                            style={{height: 160}}
                            dataSource={this.state.dataSource}
                            renderPage={this._renderPage}
                            isLoop={true}
                            autoPlay={true}/>
                    </View>
                    {/*中间的view*/}
                    <HomeMiddleView style={{marginBottom:10}} data={this.state.rateData}/>
                </ScrollView>
            </View>
        );
    }

    /**
     * 轮播图
     * @param data
     * @param index
     * @returns {XML}
     * @private
     */
    _renderPage = (data, index) => {
        return (
            <TouchableWithoutFeedback onPress={() => Actions.WebViewPage({url: data.htmlUrl})}>
                <Image
                    source={{uri: data.imageUrl}}
                    style={styles.page}/>
            </TouchableWithoutFeedback>
        );
    }

    componentDidMount() {
        this.getBannerList();
        this.getRateData();
    }

    _onRefresh = () => {
        this.getBannerList();
        this.getRateData();
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.isLogin!==this.props.isLogin) {
            //登录状态发生变化
            this.getRateData();
            return false;
        }
        return true;
    }


    /**
     * 获取轮播图
     */
    getBannerList() {
        NetUtils.get(Api.homebanner, null, (result) => {
            if (result.code === 1) {
                this.setState({
                    dataSource: dataSource.cloneWithPages(result.object),
                });
            }
        }, () => this.setState({isRefreshing: false}));
    }

    /**
     * 获取利率信息
     */
    getRateData() {
        NetUtils.post(Api.rate, null, (result) => {
            if (result.code === 1) {
                this.setState({
                    rateData: result,
                });
            }else {
                Toast.message(result.message);
            }
        });
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#dadada"
    },
    page: {
        width: deviceWidth,
        height: 160,
    },
});
const mapStateToProps = store => ({
    isLogin: store.login.isLogin,
});
export default connect(mapStateToProps)(HomePage);
